<%-- 
    Document   : materia
    Created on : 09-02-2012, 08:20:45 AM
    Author     : Susy
--%>
<script>
    function searchMateria(){
        //var url = getBaseURL();
        //url = url + "Materia.jsa?cmd=searchMateria";
        var url = "./Materia.jsa?cmd=searchMateria";
        window.open(url, "carrWin", "HEIGHT=600, WIDTH=600, MODAL=YES, scrollBars=YES"); 
    }
    
    function seleccionarMateria(){
        var form = document.getElementById("materiaForm");
        var disponibles = form.disponibles;
        var i = 0;
        for (i = disponibles.options.length-1; i >= 0; i--){
            if (disponibles.options[i].selected){
                break;
            }
        }
        form.codigo.value=disponibles.options[i].value;
        form.cmd.value="seleccionarMateria";
        form.submit();
    }
    
    function select(){
        var form = document.getElementById("materiaForm");
        var disponibles = form.disponibles;
        var lenDis = disponibles.length - 1;
        var i = 0;
        for (i = lenDis; i >= 0; i--){
            if (disponibles.options[i].selected){
                form.codigo.value=disponibles.options[i];
            }
        }
        form.cmd.value = "seleccionarMateria";
        form.submit();
    }
    
    function save(){
        var form = document.getElementById("materiaForm");
        var options = form.seleccionadas.options;
        var len = options.length - 1;
        var i = 0;
        for (i = len; i >= 0; i--){
            options[i].selected = true;
        }
        form.cmd.value="agregarMateriaCarrera";
        
        if(ValidateFormMateriasXCarrera() == true){
            form.submit();
        }
    }
    
    function mostrarCarreras(){
        var form = document.getElementById("materiaForm");
        form.cmd.value = "init";
        form.submit();
    }
    
    function toRightList(){
        var form = document.getElementById("materiaForm");
        var disponibles = form.disponibles;
        var seleccionadas = form.seleccionadas;
        var lenDis = disponibles.length - 1;
        var i = 0;
        for (i = lenDis; i >= 0; i--){
            if (disponibles.options[i].selected){
                disponibles.options[i].selected = false;
                seleccionadas.add(disponibles.options[i], 0);
            }
        }
    }
    
    function toLeftList(){
        var form = document.getElementById("materiaForm");
        var disponibles = form.disponibles;
        var seleccionadas = form.seleccionadas;
        var lenSel = seleccionadas.length - 1;
        var i = 0;
        for (i = lenSel; i >= 0; i--){
            if (seleccionadas.options[i].selected){
                seleccionadas.options[i].selected = false;
                disponibles.add(seleccionadas.options[i], 0);
            }
        }
    }
    
    function guardarMateria(){
        var form = document.getElementById("materiaForm");
        if(ValidateFormMateria() == true) {
            form.submit();
        }
    }
    
    function clean(){
        var form = document.getElementById("materiaForm");
        form.codigo.value = "";
        form.nombre.value = "";
        form.estado.value=false;
        form.uv.selectedIndex="-1";
        form.cmd.value = "init";
    }
    
    function cleanAndSubmit(){
        clean();
        var form = document.getElementById("materiaForm");
        form.submit();
    }
    
    function ValidateFormMateria() {
        var form = document.getElementById("materiaForm");
        if(form.codigo.value.trim() == "") {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        }
        if(form.nombre.value.trim() == "") {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message2" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        }
        if(form.uv.value.trim() == "") {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message3" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        }
        return true;
    }
    
    function ValidateFormMateriasXCarrera() {
        var form = document.getElementById("materiaForm");
        if(form.idUniv.value.trim() == "") {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message4" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        }
        if(form.codCarrera.value.trim() == "") {
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#dialog-message5" ).dialog({minHeight: 70, height: 180, modal: true, buttons: {Ok: function() {$( this ).dialog( "close" );}}});
            return false;
        }
        return true;
    }
</script>
<%@include file="/include/header.jsp" %>
<div class="content">
    <html:form action="/Materia" styleId="materiaForm">
        <table class="form">
            <caption class="titleSeg">Mantenimiento de Materias</caption>
            <logic:equal name="save" value="update">
                  <html:hidden property="cmd" value="modificarMateria" />
            </logic:equal>
            <logic:equal name="save" value="new">
                  <html:hidden property="cmd" value="guardarMateria" />
            </logic:equal>            
            <tr class="campos">
                <td class="label">Activo:&nbsp;&nbsp;</td>
                <td class="control" colspan="2"><html:checkbox property="estado" styleClass="check" /></td>

                <td class="label">C&oacute;digo Materia:&nbsp;&nbsp;</td>
                <td class="control"><html:text property="codigo" styleClass="tinput50"/></td>
            </tr>
            <tr class="campos">
                <td class="label">Nombre Materia:&nbsp;&nbsp;</td>
                <td class="control"><html:text property="nombre" styleClass="tinput200"/></td>
                <td width="20px"></td>
                <td class="label">UV:&nbsp;&nbsp;</td>
                <td class="control"><html:select property="uv" styleClass="tinput50">
                        <html:option value="">-----</html:option>
                        <html:option value="1"> 1 </html:option>
                        <html:option value="2"> 2 </html:option>
                        <html:option value="3"> 3 </html:option>
                        <html:option value="4"> 4 </html:option>
                        <html:option value="5"> 5 </html:option>
                    </html:select>
                </td>
            </tr>
            <logic:present name="msg">
                <tr>
                    <td colspan="5" class="success">
                        <html:img src="./images/ok.png" />&nbsp;
                        <html:messages id="mensaje" name="msg">
                            <bean:write name="mensaje" />
                        </html:messages>
                    </td>
                </tr>
            </logic:present>
            <logic:present name="errors">
                <tr>
                    <td colspan="5" class="errors">
                        <html:img src="./images/error.png" />&nbsp;<html:errors name="errors" />
                    </td>
                </tr>
            </logic:present>
            <tr class="campos">
                <td  class="control" colspan="3">
                <div style="float: left">
                <html:button value="Guardar" property="add" styleClass="button" onclick="guardarMateria();"/>
                </div>
                </td>
            </tr>
            <tr>
                <td colspan="5">&nbsp;</td>
            </tr>
            <tr class="campos">
                <td class="label">Universidades:&nbsp;&nbsp;</td>
                <td class="control">
                    <html:select property="idUniv" styleClass="tinput178" onchange="mostrarCarreras();">
                        <html:option value="">---Seleccione---</html:option>
                        <html:options collection="UniversidadesList" property="idUniv"
                                      labelProperty="nombre" labelName="nombre"></html:options>
                    </html:select>
                </td>
                <td width="20px"></td>
                <td  class="label">Carreras:&nbsp;&nbsp;</td>
                <td class="control">
                    <html:select property="codCarrera" styleClass="tinput200" onchange="mostrarCarreras();">
                        <html:option value="">---Seleccione---</html:option>
                        <html:options collection="availableCarrerasList" property="codigo"
                                      labelProperty="nombre" labelName="nombre" />
                    </html:select>
                </td>
            </tr>
            <tr class="campos">
                <td valign="top" class="label">Disponibles:&nbsp;&nbsp;</td>
                <td class="control">
                    <html:select property="disponibles" size="5" styleClass="tinput200" multiple="true" ondblclick="seleccionarMateria();">
                        <html:options collection="availableList" property="codigo"
                                      labelProperty="nombre" labelName="nombre" />
                    </html:select>
                </td>
                <td valign="middle" align="center" width="60px">
                    <html:button property="derecha" value=">>" onclick="toRightList();" />
                    <html:button property="izquierda" value="<<" onclick="toLeftList();" />
                </td>
                <td valign="top" class="label">Seleccionadas:&nbsp;&nbsp;</td>
                <td class="control">
                    <html:select property="seleccionadas" size="5" styleClass="tinput200" multiple="true">
                        <html:options collection="selectedList" property="codigo"
                                      labelProperty="nombre" labelName="nombre" />
                    </html:select>
                </td>
            </tr>
            <tr>
                <td colspan="5">&nbsp;</td>
            </tr>
            <tr class="botones">
                <td colspan="2">
                    <div style="float: left">
                        <html:button value="Guardar" property="guardar" styleClass="button" onclick="save();" />
                        <html:button value="Limpiar" property="limpiar" onclick="cleanAndSubmit();" styleClass="button" />
                    </div>
                </td>
            </tr>
        </table>
    </html:form>
    
    <!-- DIVS DE MENSAJES DE VALIDACIONES -->
    
    <div id="dialog-message" style="display: none" title="Advertencia">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            El c&oacute;digo de la materia es obligatorio
	</p>
    </div>
    
    <div id="dialog-message2" style="display: none" title="Advertencia">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            El nombre de la materia es obligatorio
	</p>
    </div>
    
    <div id="dialog-message3" style="display: none" title="Advertencia">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            Debe seleccionar las unidades valorativas (UV)
	</p>
    </div>
    
    <div id="dialog-message4" style="display: none" title="Advertencia">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            Debe seleccionar la universidad
	</p>
    </div>
    
    <div id="dialog-message5" style="display: none" title="Advertencia">
	<p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            Debe seleccionar la carrera
	</p>
    </div>
    <!-- ******************************** -->
    
</div>
<%@include file="/include/footer.jsp" %>
